<template>
  <bm-circle
    :center="circlePath.center"
    :radius="circlePath.radius"
    :stroke-color="strokeColor"
    :stroke-opacity="strokeOpacity"
    :stroke-weight="strokeWeight"
    :fillColor="fillColor"
    @lineupdate="updateCirclePath"
    :editing="isEdit"
  ></bm-circle>
</template>

<script>
import BmCircle from "vue-baidu-map/components/overlays/Circle";

export default {
  components: {
    BmCircle
  },
  props: {
    circlePath: { // 圆心和半径
      type: Object,
      default: function(){
        return {
            center: {
            lng: 12,
            lat: 12
          },
          radius: 60
        }
      }
    },
    isEdit: { // 是否可编辑
      type: Boolean,
      default: false
    },
    fillColor: { // 填充颜色
      type: String,
      default: '#6f9bf3'
    },
    strokeOpacity: { // 透明度
      type: Number,
      default: 0.5
    },
    strokeStyle: { // 线类型 solid dashed
      type: String,
      default: "solid"
    },
    strokeColor: { // 线的颜色
      type: String,
      default: "#000"
    },
    strokeWeight: { // 线粗细
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      
    };
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    updateCirclePath(e) {
      this.circlePath.center = e.target.getCenter();
      this.circlePath.radius = e.target.getRadius();
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
